import React, { useState } from "react";
import { Table, Radio } from "antd";

// 表格列定义
const tableCols = [
	{ subjectId: 481, title: "MẮT PHẢI", dataIndex: "RIGHTEYE", key: "RIGHTEYE", dataType: "OPTIONS" },
	{ subjectId: 482, title: "BỘ PHẬN", dataIndex: "SEPARATION", key: "SEPARATION", dataType: "SUBJECT" },
	{ subjectId: 483, title: "MẮT TRÁI", dataIndex: "LEFTEYE", key: "LEFTEYE", dataType: "OPTIONS" }
];

// 表格行数据
const tableRows = [
	{
		LEFTEYE: [
			{
				status: null,
				createdTime: 1737006667000,
				updatedTime: 1737081408000,
				createdBy: "LEAF",
				itemId: 1235,
				nameCn: "正常",
				nameEn: "Normal",
				nameVi: "Bình thường",
				pkId: null,
				result: null,
				subjsId: 489,
				suffix: null
			},
			{
				status: null,
				createdTime: 1737006667000,
				updatedTime: 1737081408000,
				createdBy: "LEAF",
				itemId: 1236,
				nameCn: "异常",
				nameEn: "Abnormal",
				nameVi: "Bất thường",
				pkId: null,
				result: null,
				subjsId: 489,
				suffix: null
			},
			{
				status: null,
				createdTime: 1737006667000,
				updatedTime: 1737081408000,
				createdBy: "LEAF",
				itemId: 1237,
				nameCn: "描述",
				nameEn: "Description",
				nameVi: "Mô tả",
				pkId: null,
				result: null,
				subjsId: 489,
				suffix: null
			}
		],
		RIGHTEYE: [
			{ status: null, createdTime: 1737006667000, updatedTime: 1737081408000, createdBy: "LEAF" /* 其他属性 */ },
			{ status: null, createdTime: 1737006667000, updatedTime: 1737081408000, createdBy: "LEAF" /* 其他属性 */ },
			{ status: null, createdTime: 1737006667000, updatedTime: 1737081408000, createdBy: "LEAF" /* 其他属性 */ }
		],
		SEPARATION: {
			status: null,
			createdTime: 1737006667000,
			updatedTime: 1737008004000,
			createdBy: "LEAF",
			nameCn: "眼球后部和眼底",
			nameEn: "Posterior part of the eyeball and fundus",
			nameVi: "Phần sau nhãn cầu và đáy mắt",
			pid: null,
			remark: null,
			sqNumb: null,
			subjsId: 489,
			type: null
		}
	}
];

function App() {
	// 存储 Radio.Group 的选中状态，使用一个对象来存储，以方便根据行和列索引查找
	const [radioSelections, setRadioSelections] = useState({});

	// 更新 Radio 选择状态和原数据的 result 属性
	const handleRadioChange = (rowIndex, columnDataIndex, value) => {
		// 先更新 radioSelections 状态
		setRadioSelections(prevState => ({
			...prevState,
			[`${rowIndex}-${columnDataIndex}`]: value
		}));

		// 找到对应的行和列数据
		const row = tableRows[rowIndex];
		const subItems = row[columnDataIndex];

		// 更新原数据的 result 属性
		if (Array.isArray(subItems)) {
			const itemToUpdate = subItems.find(item => item.itemId === value);
			if (itemToUpdate) {
				itemToUpdate.result = "新的结果"; // 这里可以根据需求修改结果值
			}
		}
	};

	// 自定义渲染函数，根据 dataType 进行不同的渲染
	const renderColumn = (text, record, index) => {
		const column = tableCols[index];
		if (column.dataType === "OPTIONS") {
			if (Array.isArray(text)) {
				const radioValue = radioSelections[`${tableRows.indexOf(record)}-${column.dataIndex}`];
				return (
					<Radio.Group
						value={radioValue}
						onChange={e => handleRadioChange(tableRows.indexOf(record), column.dataIndex, e.target.value)}
					>
						{text.map((item, subIndex) => (
							<Radio key={subIndex} value={item.itemId}>
								{item.nameCn}
							</Radio>
						))}
					</Radio.Group>
				);
			}
		} else if (column.dataType === "SUBJECT") {
			return (
				<div>
					{record[column.dataIndex].nameCn} ({record[column.dataIndex].nameEn})
				</div>
			);
		}
		return text;
	};

	// 生成表格列配置
	const columns = tableCols.map((col, index) => ({
		...col,
		render: (text, record) => renderColumn(text, record, index)
	}));

	return <Table columns={columns} dataSource={tableRows} />;
}

export default App;
